<template>
  <div class="box">
    <div class="container">
      <titleHaed :Crumbs="Crumbs"></titleHaed>
      <div class="bigBox">
        <div class="title">用户管理</div>
        <div class="operation">
          <div class="search">
            <input type="text" placeholder="请在此输入搜索内容" v-model="search_user" />
            <el-button @click="search">搜索</el-button>
            <el-button @click="newuser">新建用户</el-button>
          </div>
        </div>
        <div class="user_list">
          <el-table
            ref="multipleTable"
            :data="user_list"
            tooltip-effect="dark"
            style="width: 100% "
            @selection-change="handleSelectionChange"
            max-height="700"
            border
          >
            <el-table-column type="index" label="序号" width="120"></el-table-column>
            <el-table-column prop="login" label="用户名" show-overflow-tooltip width="275"></el-table-column>
            <el-table-column prop="role" label="角色" width="252"></el-table-column>
            <el-table-column prop="lastLogin" label="最后登录时间" show-overflow-tooltip width="228"></el-table-column>
            <el-table-column prop="status" label="状态" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" round @click="upGroup(scope.row.userId)">管理分组</el-button>
                <el-button size="mini" round @click="set(scope.row.userId)">修改</el-button>
                <el-button size="mini" round @click="delUser(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <el-pagination
            layout="prev, pager, next"
            :current-page="page"
            :page-size="size"
            :total="total"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </div>
    </div>
    <!-- 用户修改 -->
    <div class="Mark" v-show="setuser">
      <div class="subbox">
        <div class="title">
          <label>{{Tips}}</label>
          <span @click="Close" class="el-icon-close"></span>
        </div>
        <div class="w">
          <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
            <el-form-item label="用户名">
              <el-input v-model="User_x.realName"></el-input>
            </el-form-item>
            <el-form-item label="账户">
              <el-input v-model="User_x.login"></el-input>
            </el-form-item>
            <el-form-item label="密码" v-show="Tips !='修改用户' ">
              <el-input v-model="User_x.password"></el-input>
            </el-form-item>
            <el-form-item label="角色">
              <el-select v-model="User_x.role" placeholder="请选择">
                <el-option
                  v-for="(item,index) in options"
                  :key="index"
                  :label="item.name"
                  :value="item.role"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="状态">
              <el-input ></el-input>
            </el-form-item>-->
            <el-form-item style="margin-left:100px">
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
              <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <!-- 用户管理分组 -->
    <div class="Mark" v-show="group_update">
      <div class="subbox">
        <div class="title">
          <div>修改管理分组</div>
          <span @click="Close" class="el-icon-close"></span>
        </div>
        <div class="group">
          <div class="Roll">
            <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
            >全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
              <el-checkbox
                v-for="(city,index) in cities"
                :label="city.id"
                :key="index"
              >{{city.name}}         <span class="groupType">({{city.imcType| groupType}})</span>        </el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="submit">
            <el-button type="primary" @click="submitGroup('ruleForm')">提交</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import titleHaed from "@/views/title";
export default {
  components: {
    titleHaed
  },
  filters:{
      groupType(val){
            if( val==0){
                return "回路"
            }else if(val==1){
                return "路灯"
            }else if(val==2){
              return "气象传感器"
            }else if(val==3){
              return "屏幕广播"
            }else if(val==4){
              return "wifi"
            }
      }
  },
  data() {
    return {
      user_list: [], //用户列表
      multipleSelection: [],
      User_x: {},
      setuser: false,
      Crumbs: {
        router: [],
        path: ["系统设置", "用户管理"],
      },
      options: [
        {
          name: "管理员",
          role: 1
        },
        {
          name: "维护员",
          role: 2
        },
        {
          name: "运行员",
          role: 3
        },
        {
          name: "维修员",
          role: 4
        }
      ],
      Tips: "",
      userID: "",
      group: [],
      checkAll: false,
      checkedCities: [],
      cities: [],
      isIndeterminate: true,
      group_update: false,
      size: 15,
      total: 0,
      search_user: "",
      page: 1
    };
  },
  methods: {
    handleCheckAllChange(val) {
      var arrId = [];
      for (let index = 0; index < this.cities.length; index++) {
        arrId.push(this.cities[index].id);
      }
      this.checkedCities = val ? arrId : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    newuser() {
      this.User_x = {};
      this.setuser = true;
      this.Tips = "新增用户";
    },
    submitForm() {
      let reg = this.regular.regular(this.User_x);

      if (reg) {
        this.$message.warning(reg);
        return;
      }
      if (this.Tips == "新增用户") {
        this.$http
          .post("/api/threesuns/user/insert", this.User_x)
          .then(res => {
            if (res.data.status == "success") {
              this.$message.success("创建用户成功");
              this.Close();
              this.user();
            } else {
              this.$message.error("创建用户失败");
            }
          });
      } else {
        this.$http
          .put(`/api/threesuns/user/${this.userID}`, this.User_x)
          .then(res => {
            if (res.data.status == "success") {
              let userId = sessionStorage.getItem("userId");
              if (userId == this.userID) {
                this.userFun(this.userID).then(res => {
                  if (res.data.data.role != 1) {
                    this.$message.success("修改成功,权限发生变化,请重新登陆");
                    sessionStorage.clear();
                    setTimeout(() => {
                      this.$router.push("/login");
                    }, 500);
                  }
                });
              } else {
                this.$message.success("修改成功");
              }
              this.setuser = false;
              this.user();
            } else {
              this.$message.error("修改失败");
              this.setuser = false;
              this.user();
            }
          });
      }
    },
    // 关闭窗口
    Close() {
      this.setuser = false;
      this.group_update = false;
    },
    // 修改用户
    async userFun(id) {
      return await this.$http.get(`/api/threesuns/user/${id}`);
    },
    set(id) {
      this.userID = id;
      this.Tips = "修改用户";
      this.setuser = true;
      this.userFun(id).then(res => {
        if (res.data.data) {
          this.User_x = res.data.data;
        }
      });
    },
    // 删除用户
    delUser(val) {
      this.$confirm("此操作将永久删除此用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .delete(`/api/threesuns/user/${val.userId}`)
            .then(res => {
              if (res.data.code == "200") {
                this.$message.success("删除成功");
                this.user();
              } else {
                this.$message.warning("删除失败");
              }
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 获取所有用户
    user() {
      this.$http
        .get("/api/threesuns/user/list", {
          params: {
            size: this.size,
            page: this.page,
            name: this.search_user
          }
        })
        .then(res => {
          this.user_list = res.data.data;
          this.total = res.data.total;
        });
    },
    handleCurrentChange(e) {
      this.page = e;
      this.user();
    },
    search() {
      this.page = 1;
      this.user();
    },
    //用户管理组
    upGroup(e) {
      this.checkedCities = [];
      this.group_update = true;
      this.userID = e;
      this.$http
        .get(`/api/threesuns/user/groupList/${this.userID}`)
        .then(res => {
            let resultArray = res.data.data.allGroups.sort((a, b) =>{
                      return  a.imcType-b.imcType
                  }
              );
          this.cities =resultArray;
          for (let i = 0; i < res.data.data.userGroups.length; i++) {
            this.checkedCities.push(res.data.data.userGroups[i].id);
          }
          if (this.checkedCities.length > 0) {
            this.isIndeterminate = true;
            this.checkAll = false;
          } else if (this.checkedCities.length == 0) {
            this.checkAll = false;
            this.isIndeterminate = false;
          }
        });
    },
    submitGroup() {
      this.$http
        .put(`/api/threesuns/user/${this.userID}/upGroup`, {
          groupIds: this.checkedCities
        })
        .then(res => {
          if (res.data.status == "success") {
            this.$message.success("修改分组成功");
            this.Close();
          } else {
            this.$message.error("修改分组失败");
          }
        })
        .catch(err => {
          this.$message.error(err);
        });
    }
  },
  mounted() {
    this.user();
  }
};
</script>
<style scoped>
@import url("../../../assets/css/table.css");
.box {
  height: 100%;
  width: 100%;
  position: relative;
  min-width: 1500px;
}
.container {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.operation {
  height: 70px;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 10px;
  padding-left: 60px;
}
.search {
  margin-top: 20px;
}

.search :nth-child(2) {
  background-color: #1d938d;
  color: #fff;
}

.search :nth-child(3) {
  background-color: #1d938d;
  color: #fff;
}
.search input {
  width: 477px;
  height: 30px;
  outline-style: none;
  border: 1px solid #fff;
  background: none;
  color: #fff;
  padding-left: 10px;
}

.operation /deep/ .el-button {
  padding: 10px 20px;
  margin-left: 30px;
}

.Mark {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

.w {
  width: 397px;
  padding: 90px;
  margin: auto;
  background: #011615;
  box-shadow: 0px 0px 8px 0px #0dc2c3 inset;
  border: 1px solid #fff;
}

.el-radio {
  margin-left: 40px;
}

.subbox {
  margin: 138px auto;
  width: 580px;
  background-color: #011615;
}

.title {
  height: 40px;
  background-color: #1d938d;
  line-height: 40px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  position: relative;
}

.title span {
  position: absolute;
  right: 10px;
  top: 10px;
}

.title:hover {
  cursor: pointer;
}

/deep/ .el-form-item__label {
  text-align: left;
  color: #fff;
}

/deep/ .el-select .el-input__inner {
  width: 315px;
  cursor: pointer;
  padding-right: 35px;
  text-align: center;
}
/* .el-button--primary {
  background-color: #09daba;
} */

.user_list {
  /* padding:0 30px 0 30px; */
}

.user_list .el-button {
  background-color: #2dcabf;
  color: #fff;
  border: none;
}

.group {
  /* background-color: black; */
  text-align: left;
  /* height: 600px; */
  box-shadow: 0px 0px 8px 0px #0dc2c3 inset;
}

/deep/.el-checkbox {
  /* display: flex; */
  width: 40%;
  margin-top: 20px;
}

.group .el-button {
  margin-top: 30px;
}

/deep/ .el-checkbox + .el-checkbox {
  margin-left: 0;
}

.el-checkbox-group {
  /* display: flex;
  flex-wrap: wrap;
  justify-content:center; */
  padding-left: 100px;
}

.submit {
  text-align: center;
  padding-bottom: 40px;
}

.el-form-item__content {
  text-align: center;
}

.el-button {
  background-color: #09daba;
  color: #fff;
}

.Roll {
  height: 435px;
  overflow-y: scroll;
}

.Roll::-webkit-scrollbar {
  width: 4px;
}

.Roll::-webkit-scrollbar-track {
  background: #011615;
}

.Roll::-webkit-scrollbar-thumb {
  background: #ccc;
}

.bigBox {
  width: 1510px;
  height: 800px;
  margin: 50px auto;
  padding-bottom: 10px;
  background-color: #011615;
  position: relative;
  box-shadow: 0px 1px 14px 0px #0dc2c3 inset;
}

.bigBox > .title {
  height: 51px;
  line-height: 51px;
  font-size: 30px;
  font-weight: 700;
}

.block {
  position: absolute;
  bottom: 30px;
  text-align: center;
  left: 0;
  right: 0;
  margin: auto;
}
.groupType {
  color:#008160;
  font-size: 12px;
}
</style>
